<template>
	<view class="content">
		<u-navbar
		   :title="$t('register.title1')"
		    :autoBack="false"
			bgColor="#292929"
			leftIconColor="#FFFFFF"
			@leftClick="backClick"
			:titleStyle ="{color:'#FFFFFF',fontSize:'40rpx'}"
		 />
		<view class="title">
			<h2>{{$t("register.title")}}</h2>
			<text>{{$t("register.title1")}}</text>
		</view>
		<view class="main">
			<u--form labelPosition="top" :borderBottom="false" :labelStyle="{color:'#fff'}" labelWidth="auto" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item :label="$t('input.firstName')" prop="name" ref="item1">
					<u--input v-model="userInfo.name" border="none" placeholderClass="placeholderStyle" :placeholder="$t('input.firstName')" class="formitem input-border"/>
				</u-form-item>
				<u-form-item :label="$t('input.lastName')" prop="surname" ref="item1">
					<u--input v-model="userInfo.surname" border="none" placeholderClass="placeholderStyle" :placeholder="$t('input.lastName')" class="formitem input-border"/>
				</u-form-item>
				<u-form-item :label="$t('input.email')" prop="email" ref="item1">
					<u--input v-model="userInfo.email" border="none" placeholderClass="placeholderStyle" :placeholder="$t('input.email')" class="formitem input-border"/>
				</u-form-item>
				<u-form-item :label="$t('input.password')" prop="password" ref="item1">
					<u--input :password="true" v-model="userInfo.password" placeholderClass="placeholderStyle" border="none" :placeholder="$t('input.password')" class="formitem input-border"/>
				</u-form-item>
				<u-form-item :label="$t('input.confirmPassword')" prop="aginPassword" ref="item1">
					<u--input :password="true" v-model="userInfo.aginPassword" placeholderClass="placeholderStyle" border="none" :placeholder="$t('input.confirmPassword')" class="formitem input-border"/>
				</u-form-item>
				<u-form-item :label="$t('input.invitationCode')" ref="item1">
					<u--input v-model="userInfo.inviteCode" border="none" placeholderClass="placeholderStyle" :placeholder="$t('input.invitationCode')" class="formitem input-border"/>
				</u-form-item>
			</u--form>
			<button class="loginBth" @click="sumbit">{{$t('login.register1')}}</button>
			<view class="loginTips">
				<text style="color: #B2B2B2;">{{$t('register.tips')}} ?</text>
				<text @click="toNavigate">{{$t('register.tips1')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: "",
					surname:"",
					email:"",
					inviteCode:"",
					password:"",
					aginPassword:""
				},
			}
		},
		computed:{
			rules(){
				return {
					'name': {
						type: 'string',
						required: true,
						message: this.$t('err.firstName'),
						trigger: ['blur', 'change']
					},
					'surname': {
						type: 'string',
						required: true,
						message: this.$t('err.lastName'),
						trigger: ['blur', 'change']
					},
					'email': [{
						type: 'string',
						required: true,
						message: this.$t('err.email'),
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
							if (!reg.test(value)) {
								callback(new Error(this.$t('err.email1')));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}],
					'password': {
						type: 'string',
						required: true,
						message: this.$t('err.password'),
						trigger: ['blur', 'change']
					},
					'aginPassword': [{
							required: true,
							message: this.$t('err.aginPassword'),
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (value !== this.userInfo.password) {
									callback(new Error(this.$t('err.aginPassword1')));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
				}
			}
		},
		onLoad(option) {
			if(option.inviteCode){
				uni.setStorageSync('inviteCode',option.inviteCode)
				this.userInfo.inviteCode = option.inviteCode
			}else if(uni.getStorageSync('inviteCode')){
				this.userInfo.inviteCode = uni.getStorageSync('inviteCode')
			}
		},
		methods: {
			backClick(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
              sumbit(){
				  this.$refs.uForm.validate().then(async (res)=>{
					 const {data:sue} = await this.$api('/front/register','POST',this.userInfo)
					 uni.removeStorageSync('inviteCode')
					 uni.navigateTo({
					 	url:'/pages/login/login'
					 })
				  })
			  },
			  toNavigate(){
				  uni.navigateTo({
				  	url:'/pages/login/login'
				  })
			  }
		},
		onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		    	this.$refs.uForm.setRules(this.rules)
		    },
	}
</script>

<style lang="scss" scoped>
	/deep/.placeholderStyle{
		color: #c4c4c4;
		font-weight: bold;
	}
	.content {
		width: 100vw;
		padding-bottom: 20rpx;
		font-family: my-font;
		min-height: 100vh;
		box-sizing: border-box;
		background: linear-gradient( 180deg, #000000 0%, #3C3C3C 100%);
		.title{
			color:#fff;
			padding: 55rpx;
			padding-top: 120rpx;
			box-sizing: border-box;
		}
		.main{
			width: 100vw;
			box-sizing: border-box;
			padding:0 95rpx;
			.formitem{
				box-sizing: border-box;
				height: 89rpx;
				border-radius: 17rpx;
				text-indent: 25rpx;
				color: #fff;
			}
			.loginBth{
				width: 100%;
				height: 89rpx;
				margin-top: 120rpx;
				border-radius: 17rpx;
				font-size: 25rpx;
				line-height: 89rpx;
				color: #fff;
				font-weight: bold;
				background-color: #926FBF;
			}
			.loginTips{
				color: #fff;
				font-size: 20rpx;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>